Ext.namespace('iOS.Bar');

Ext.define('TopBar', {
    extend   : 'BaseBar',
    
    /*
     * 图标配置信息，在配置文件配置
     */
    _items      : null,
    
    /*
     * topbar的状态,所有属性为normal的时候为正常值
     */
    _barStatus   : {
        bgColor : null,
        display : null,
        topTime : null,
    },

    /*
     * 定时器，用来刷新topbar上的时间
     */
    _refleshTime: null,
    
    _eventList : [
        ['showTopTime'],
        ['hideTopTime'],
        ['hideTopBar'],
        ['showTopBar'],
        ['bgBlack'],
        ['bgWhite'],
        ['bgNormal'],
        ['initTopBar']
    ],
     
    statics  : {
        ViewCls : 'top-bar',
        IconCls : 'status-icon',
        LockCls : 'status-lock',
        TimeCls : 'status-time',
        SpaceCls: 'status-space',
    }, 
    
    _normalColor: 'rgba(0, 0, 0, 0.5)',

    _blackColor: 'rgba(0, 0, 0, 1)',

    /*
     * 当解锁的时候，将lock图标显示成时间
     */
    showTopTime: function(){
        if (this._barStatus.topTime == 'normal') {
            return;
        };
        var sttc               = this.self,
            timeIcon           = this.getElCacheByCls(sttc.LockCls);
        timeIcon.removeClass(sttc.LockCls).addClass(sttc.TimeCls);
        this._setTopTime();
        this._refleshTime      = setInterval(this._setTopTime, 10000, this);
        this._barStatus.topTime = 'normal';
    },
    
    _setTopTime: function(that){
        var that      = that || this,
            sttc      = that.self,
            timeIcon  = that.getElCacheByCls(sttc.LockCls),
            htmlData  = [];
        timeIcon.removeClass(sttc.LockCls).addClass(sttc.TimeCls);
        htmlData.push(
            '<span>',that._getTime(),
            '</span>'
        );
        timeIcon.html(htmlData.join(''));
    },
    
    _getTime: function(){
        var time      = new Date(),
            hour      = time.getHours() >= 10 ? time.getHours() : '0' + time.getHours(),
            minute    = time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes();
        return hour + ':' + minute;
    },
    
    hideTopTime: function(){
        if (this._barStatus.topTime == 'hide') {
            return;
        };
        var sttc       = this.self,
            timeIcon   = this.getElCacheByCls(sttc.TimeCls);
        timeIcon.removeClass(sttc.TimeCls).addClass(sttc.LockCls);
        timeIcon.html('');
        clearInterval(this._refleshTime);
        this._barStatus.topTime = 'hide';
    },
    
    hideTopBar: function(){
        if (this._barStatus.display == 'hide') {
            return;
        };
        var that   = this,
            topBar = this.getElCache(),
            height = topBar.height();
        topBar.cssTranslate(0, -height);
        topBar.on('webkitTransitionEnd', function(){
            if(that._barStatus.display == 'normal'){
                return;
            }
            //that.hide();
        });
        this._barStatus.display = 'hide';
    },
    
    showTopBar: function(){
        if (this._barStatus.display == 'normal') {
            return;
        };
        var topBar = this.getElCache();
        topBar.cssTranslate(0, 0);
        this._barStatus.display = 'normal';
    },
    
    bgBlack: function(){
        if (this._barStatus.bgColor == 'black') {
            return;
        };
        this.getElCache().css('background', this._blackColor);
        this._barStatus.bgColor = 'black';
    },
    
    bgWhite: function(){

    },

    bgNormal: function(){
        if(this._barStatus.bgColor == 'normal'){
            return;
        }
        this.getElCache().css('background', this._normalColor);
        this._barStatus.bgColor = 'normal';
    },
    
    initTopBar : function(){
        this.bgNormal();
        this.showTopBar();
    },

    _initInnerDom: function(){
        this.callParent();
        var items    = this._items,
            sttc     = this.self,
            htmlData = [],
            style, spaStyle, iconName;
        $.each(items, function(index, value){
            style    = [];
            spaStyle = [];
            iconName = value.iconName;
            value.flex ? style.push('-webkit-box-flex:', value.flex) : '';
            value.spaceFlex ? spaStyle.push('-webkit-box-flex:', value.spaceFlex) : '';
            htmlData.push(
                '<div class="',sttc.SpaceCls,'" style="',spaStyle.join(''),'">',
                '</div>',
                '<div iconname="',iconName,'" class="',sttc.IconCls,' ',value.cls ,'" style="',style.join(''),'">',
                '</div>'
            );
        });
        this.getElCache().html(htmlData.join(''));
    }
});

iOS.Bar.TopBar = TopBar;
